<template>
  <div class="">
    <!-- <Bread /> -->
    <div class="self-container flex font-sans mt-4">
      <div class="self-main">
        <h3 class="py-4 leading-relaxed ">{{ info.title }}</h3>
        <div class="text-gray-400 py-4">
          <i class="el-icon-time"> </i>
          <span>
            {{ info.releaseTime }}
          </span>
        </div>
        <div class="py-4" v-html="info.dynamicInfo"></div>
      </div>
      <div class="aside ml-8 mt-4">
        <h5 class="relative -top-1 py-4 border-t-4 border-blue-500 px-4">
          相关推荐
        </h5>
        <ul class="px-4 list-inside">
          <li
            v-for="item in recommendList"
            :key="item.id"
            class="recommend-item flex"
            @click="toDetail(item)"
          >
            <!-- <i class="el-icon-caret-right bg-blue-500"> </i> -->
            <!-- <div>
              <el-image
                :src="item.mainImg"
                class="recommend-left"
                fit="cover"
              ></el-image>
            </div> -->
            <p class="font-bold text-md">
              {{ item.name || item.title }}
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
import { getDynamicById, getDynamicSerList } from '@/api/dynamicService.js'
export default {
  components: {
    Bread,
  },
  data() {
    return {
      info: {},
      recommendList: [],
    }
  },
  watch: {
    '$route.params': {
      handler(v) {
        let id = v.id
        this.getInfo(id)
        this.geList()
      },
      immediate: true,
    },
  },

  methods: {
    getInfo(id) {
      getDynamicById(id).then((res) => {
        this.info = res.data
      })
    },
    toDetail(item) {
      let typeId = item.typeId
      let id = item.id
      this.$router.push({
        path: `/serviceDynamic/servicelist/${typeId}/serviceDetail/${id}`,
      })
    },
    geList() {
      getDynamicSerList(this.queryParams).then((res) => {
        if (res.code === 200) {
          let tempList = [...res.rows].splice(0, 5)
          this.recommendList = tempList
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.self-main {
  width: 770px;
  min-height: 60vh;
}
.aside {
  min-width: 390px;
  width: 390px;
  max-height: 500px;
  @apply border  border-gray-300;
  li:before {
    content: '';
    display: block;
    border: 10px solid #1678ff;
    border-color: transparent transparent transparent #1678ff;
  }
  .line-1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .recommend-item {
    @apply py-4 border-b cursor-pointer;

    .recommend-left {
      width: 104px;
      min-width: 104px;
      height: 68px;
    }
  }
}
</style>
